<template>
  <!-- 操作栏 -->
  <div class="top-option">
    <div class="left-box">
      <slot class="left-box" name="left-box"></slot>
    </div>
    <div class="right-box">
      <slot class="right-box" name="right-box">
        <div class="sub">
          <!-- <el-button @click="handleSearch" size="small" type="primary">查询</el-button> -->
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
// @import '~styles/mixins.scss';
// @import '~styles/variables.scss';

/* 操作栏相关*/

.top-option {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid #efefef;
  margin: 10px 20px;

  .left-box {
    padding-left: 75px;
    max-width: 900px;

    .sub {
      float: left;
      width: 200px;
      margin-left: 10px;
      margin-top: 10px;
    }
  }

  .right-box {
    padding-right: 20px;
    min-width: 300px;

    .sub {
      float: right;
      margin-left: 10px;
      // margin-top: 10px;
    }
  }
}
</style>